<template>
	<view class="map">
		<map 
			class="mapWrapper" 
			:latitude="latitude" 
			:longitude="longitude" 
			:controls="controls"
			@regionchange="onMapRegion"></map>
		<view class="ok" v-on:click="onOk">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:"",
				longitude:"",
				controls:[],
				sys:uni.getSystemInfoSync()
			}
		},
		onLoad(options) {
			var self = this
			var center = options.center
			this.longitude = center.split(",")[0]
			this.latitude = center.split(",")[1]
			// uni.getLocation({
			// 	type:"wgs84",
			// 	success(res) {
			// 		self.refreshCenterLocation(res)
			// 	},
			// 	fail(err) {
			// 		console.log(err)
			// 	}
			// })
			
			this.controls = [
				{
					id: 1, //定位
					position: {
						left: this.sys.windowWidth/2-20,
						top: this.sys.windowHeight/2-20,
						width: 40,
						height: 40,
					},
					iconPath: '../../static/dingwei-2.png',
					clickable: true
				}
			]
		},
		methods: {
			onMapRegion(e) {
				console.log(e)
				if (e.type == 'begin') {
					this.onBeginRegin()
				}
				if (e.type == 'end') {
					this.onEndRegin()
					this.refreshCenterLocation(e.detail.centerLocation)
				}
				
			},
			onBeginRegin(){
				this.refreshcontrols(10)
			},
			onEndRegin(){
				this.refreshcontrols(0)
			},
			refreshcontrols(cha=0){
				this.controls = [
					{
						id: 1, //定位
						position: {
							left: this.sys.windowWidth/2-20,
							top: this.sys.windowHeight/2-20-cha,
							width: 40,
							height: 40,
						},
						iconPath: '../../static/dingwei-2.png',
						clickable: true
					}
				]
			},
			refreshCenterLocation(pos){
				this.latitude = pos.latitude.toFixed(5)
				this.longitude = pos.longitude.toFixed(5)
			},
			onOk() {
				
				uni.setStorageSync("center", this.longitude+","+this.latitude)
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.map {
		height: 100%;
	}
	.mapWrapper {
		width: 100%;
		height: 100%;
	}
	.ok  {
		background-color: #007AFF;
		text-align: center;
		position: absolute;
		bottom: 40px;
		width: 80%;
		height: 50px;
		border-radius: 25px;
		color: white;
		line-height: 50px;
		font-size: 18px;
		left: 10%;
	}
</style>
